<template>
  <div class="content">
    <div v-if="car_show==0">
      <div class="index-header-box" id="head">
        <div class="index-header">
          <div @click="$router.back(-1)" class="back">
            <van-icon name="arrow-left"/>
          </div>
          <div class="title">{{info.title}}</div>
        </div>
      </div>

      <div class="rel-public-title" v-if="info.type==0">
        <span class="txt">车辆信息</span>
        <span class="tps no">(非必填)</span>
      </div>

      <div class="rel-public-box" readonly v-if="info.type==0">
        <div class="rel-form-box" style="border: 0">
          <div class="rel-form-title">品牌-车系-款型</div>
          <div class="rel-form-input" @click="car_show=1" :class="{'active':brand!=''}">
            {{brand==''?'请选择车辆品牌':brand}}
          </div>
          <div class="rel-form-bottom-tps" v-if="carType!=''">（指导价：{{carType}}元）</div>
        </div>
      </div>

      <div class="rel-public-title">
        <span class="txt">联系方式</span>
        <span class="tps">(必填)</span>
      </div>
      <van-field v-model="realName" label="姓      名" placeholder="请输入姓名"/>
      <van-field type="phone" v-model="mobile" label="联系方式" placeholder="请输入手机号码" error-message=""/>

      <!--<van-field class="input" v-model="realName" label="姓       名" placeholder="请输入姓名" />-->
      <!--<van-field type="phone" v-model="mobile" label="联系方式" placeholder="请输入手机号码" />-->

      <van-field readonly clickable :label="type[info.type]+'时间'" v-model="upTime" :placeholder="'请选择'+type[info.type]+'时间'" @click="TimePicker = true" />
      <van-popup v-model="TimePicker" position="bottom">
        <van-datetime-picker
          v-model="upDate"
          type="datetime"
          @cancel="TimePicker=false"
          @confirm="chooseTime"
          :min-date="minDate"
          :formatter="formatter"/>
      </van-popup>

      <van-field v-model="address" :label="type[info.type]+'地点'" :placeholder="'请输入'+type[info.type]+'地点'" />

      <div class="order-tps-box">
        {{info.desc_content}}
        <div class="price-box">
          服务费为{{info.price}}元/辆
        </div>
      </div>

      <div class="order-btn-box">
         <div class="btn-box">
           <van-button type="info" class="order-btn active" @click="addOrder">立即提交</van-button>


           <div class="btn-box-tps">
             <van-checkbox v-model="agree">我已清楚阅读并知晓《小白服务协议》及收费标准</van-checkbox>
           </div>
         </div>
      </div>
    </div>
    <SearchCar @seaData="getBackData" @cancel="seaCancel" v-if="car_show==1"></SearchCar>
  </div>
</template>

<script>
  import SearchCar from '../../components/search_car'
  import storeJs from 'storejs'
  import { Dialog } from 'vant';

  export default {
    name: "detail",
    components: {
      SearchCar
    },
    data() {
      return {
          id: this.$route.query.id,
          info:[],

          type:{
              0:'检车',
              1:'陪购',
          },

        car_show: 0,
        TimePicker:false,
        minDate: new Date(),
        upDate: new Date(),

        realName:'',
        mobile:'',
        brand:'',
        brand_id:0,
        carType:'',
        carType_id:0,
        car:'',
        car_id:0,
        series:"",
        series_id:0,
        go_time:0,
        upTime:'',
        address:'',
        agree:true,
      }
    },
    computed: {},
    mounted: function () {
      this.init();
    },
    methods: {
        init(){
            this.isLogin();

            this.$api.svr.detail(this.id).then(res=>{
                var res=res.data;

                this.info=res.data;
            });

            if(storeJs("User")){
                var u=storeJs("User");

                this.mobile=u.mobile;
            }
        },

      seaCancel() {
        window.scrollTo(0, 0);
        this.car_show = 0;
      },
      getBackData(data) {
        window.scrollTo(0, 0);
        this.brand = data.carBrand.brand+"-"+data.carSeries.series_name;
        this.carType = data.carSeries.series_name;
        this.car = data.car.car_name;

        this.brand_id = data.carBrand.brand_id;
        this.carType_id = data.carSeries.series_id;

          if(data.car.car_name!=undefined && data.car.car_name!="undefined"){
              this.car = data.car.car_name;
              this.car_id = data.car.car_id;
              this.brand+='-'+data.car.car_name;
              this.carType = data.car.series_max;
          }

        this.car_show = 0;
      },

      //上牌时间
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        } else if (type === 'hour') {
          return `${value}时`
        } else if (type === 'minute') {
          return `${value}分`
        }
        return value;
      },
      chooseTime(value){
        let y = value.getFullYear();
        let mon = value.getMonth() + 1;
        let d = value.getDate();
        let h = value.getHours();
        let min = value.getMinutes();
        let timeStr = y+"/"+ mon +"/"+ d +" " + h+":" + min;
        this.go_time = new Date(timeStr).getTime()/1000;
        this.TimePicker = false;
        this.upTime = y+"年"+ mon +"月"+ d +"日 " + h+"时" + min + "分";
      },
      addOrder(){
        if (!new RegExp("^[\u4e00-\u9fa5\\s·]+$").test(this.realName)) {
          this.$toast('请输入正确的联系人姓名！');
          return;
        }

        if (!this.is_mobile(this.mobile)) {
          this.$toast('请输入正确的手机号码！');
          return ;
        }

        if(this.realName=="" && this.mobile==""){
          this.$toast('请输入联系方式！');
          return;
        }

        // if(this.info.type==0){
        //     if(this.brand_id==0 || this.carType_id==0){
        //         this.$toast('请选择车辆！');
        //         return;
        //     }
        // }

        if(this.go_time==""){
          this.$toast('请选择'+this.type[this.info.type]+'时间时间！');
          return;
        }

        if(this.address==""){
          this.$toast('请输入'+this.type[this.info.type]+'地点！');
          return;
        }

        if(this.agree == false){
          Dialog.alert({
            message: "请确认是否阅读知晓服务协议"
          }).then();
          return false;
        }

        let data = {
          brand_id:this.brand_id,
          series_id:this.carType_id,
          car_id:this.car_id,
          real_name:this.realName,
          mobile:this.mobile,
          go_time:this.go_time,
          address:this.address,
          service_id:this.$route.query.id,
        };
        this.$api.svr.addOrder({data:data}).then(res=>{
          if(res.data.status === 1){
            Dialog.alert({
              message: "提交成功！"
            }).then(()=>{
              this.$router.replace({
                path: '/service',
              })
            });
          } else {
            Dialog.alert({
              message: res.data.msg
            }).then();
          }
          console.log(res.data);
        });
        console.log(data);
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
</style>
